<template>
    <div class="file-manager">
        <el-card>
            <div class="section-title">文件管理</div>
            <template v-if="loading">
                <el-skeleton :rows="4" animated style="margin: 32px 0;" />
            </template>
            <template v-else>
                <div class="table-scroll-area">
                    <el-row :gutter="16" style="margin-top: 24px;">
                        <el-col v-for="file in fileList" :key="file.uid" :span="6">
                            <el-card style="margin-bottom: 16px;">
                                <div style="text-align:center;">
                                    <img v-if="isImage(file)" :src="file.url" style="max-width:100%;max-height:120px;" />
                                    <el-icon v-else style="font-size:48px;"><i-ep-document /></el-icon>
                                </div>
                                <div style="margin-top:8px;word-break:break-all;">{{ file.name }}</div>
                                <el-button size="mini" @click="handlePreview(file)" style="margin-top:8px;">预览</el-button>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <div class="demo-pagination-block">
                    <el-pagination
                        :background="true"
                        layout="sizes, prev, pager, next, jumper"
                        :total="fileList.length"
                    />
                </div>
                <el-dialog v-model="previewVisible" title="文件预览" width="60%">
                    <img v-if="previewFile && isImage(previewFile)" :src="previewFile.url" style="max-width:100%;" />
                    <div v-else>暂不支持预览该类型文件</div>
                </el-dialog>
            </template>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { handleApiError } from '@/utils/errorHandler'

const fileList = ref([
    {
        name: '示例文档.pdf',
        url: '/api/files/sample.pdf',
        uid: '1',
        status: 'success'
    },
    {
        name: '示例图片.jpg',
        url: '/api/files/sample.jpg',
        uid: '2',
        status: 'success'
    }
])
const previewVisible = ref(false)
const previewFile = ref(null)
const loading = ref(true)

function isImage(file) {
    return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file.name)
}

function handlePreview(file) {
    previewFile.value = file
    previewVisible.value = true
}

onMounted(() => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 600)
})
</script>

<style scoped>
.file-manager {
    padding: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 18px;
}

.el-card__body {
    height: 500px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
}

.table-scroll-area {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 12px;
}

.demo-pagination-block {
    margin-top: auto;
    padding-bottom: 8px;
    background: inherit;
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
  .file-manager {
    padding: 10px;
    margin-left: 0;
    margin-top: 0;
  }
  
  .el-card__body {
    padding: 16px;
  }
  
  .el-row .el-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .section-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .file-manager {
    padding: 5px;
    margin-left: 0;
    margin-top: 0;
  }
  
  .el-card__body {
    padding: 12px;
  }
  
  .el-row .el-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .section-title {
    font-size: 14px;
  }
}
</style>